<template>
  <div>
    <!-- 搜索区域的内容 -->
    <div v-if="$props.hasSearch" class="search" :style="searchStyle">
      <el-form ref="searchForm" :inline="true" :model="$props.modelValue" class="demo-form-inline" :label-width="$props.labelWidth + 'px'">
        <slot name="search" />
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="submitForm()">搜索</el-button>
          <el-button size="small" icon="el-icon-refresh" @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 头部的按钮 -->
    <div v-if="$props.headerBtnShow" class="btns" :style="$props.btnStyle">
      <slot name="btns">
        <el-button size="small" type="primary" @click="headerBtnClick">{{ $props.headerBtnText }}</el-button>
      </slot>
    </div>
    <div v-if="!$props.headerBtnShow && !$props.hasSearch" :style="{'padding-top': $props.tablePadding + 'px'}" />
    <el-table
      v-loading="tableLoading || loading"
      :data=" $props.customRequest ? $props.data : tableData"
      border
      style="width: 100%"
    >

      <el-table-column
        v-for="item in tableColumn"
        :key="item.prop"
        align="center"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :fixed="item.fixed"
      >
        <template slot-scope="scope">
          <slot :name="item.prop" :item="item.prop" :row="scope.row">
            {{ scope.row[item.prop] }}
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'TableList',
  props: {
    /** 是否展示 头部的搜索区域 */
    hasSearch: {
      type: Boolean,
      default: true
    },
    /** tab 的 内容 */
    tableColumn: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    /** table 搜索 渲染的值 */
    modelValue: {
      type: Object
    },
    /** 请求的url */
    requestUrl: String,
    /** 请求方式 */
    requestMethod: {
      type: String,
      default: 'get'
    },
    /**
     * 是否展示头部的按钮
     */
    headerBtnShow: {
      type: Boolean,
      default: true
    },
    initParams: {
      type: Object,
      default: () => ({})
    },
    /** 头部按钮的文案 */
    headerBtnText: String,
    /** 是否自定义请求 */
    customRequest: {
      type: Boolean,
      default: false
    },
    /** table 顶部的空间 */
    tablePadding: {
      type: Number,
      default: 60
    },
    /** btn 的外部样式 */
    btnStyle: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: '100'
    },
    searchStyle: {
      type: String,
      default: ''
    },
    tableLoading: {
      type: Boolean
    },
    /** 格式化请求回来的参数 */
    requestListFormat: {
      type: Function
    },
    costumeTotal: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      /** 总条数，从接口获取 */
      total: 0,
      /** table渲染的数据 */
      tableData: [],
      /** loading 状态 */
      loading: true,
      /** 默认请求参数 */
      params: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    costumeTotal(val) {
      if (val) {
        this.total = val
      }
      console.log(val)
    }
  },

  created() {
    this.requestData()
  },
  methods: {
    /** 组件内部的请求方法 */
    async requestData(type) {
      try {
        const { requestUrl, requestMethod, customRequest } = (this.$props || {})
        const p = {
          ...this.$props.initParams,
          ...this.params
        }
        // 自定义请求，把参数给扔出去
        if (customRequest) {
          this.$emit('requestParams', p)
          // console.log(d, '--')
          return
        }
        if (!requestUrl) {
          return
        }
        this.loading = true

        const { total, rows, data } = await request({
          url: requestUrl,
          method: requestMethod,
          data: requestMethod === 'post' ? p : {},
          params: requestMethod === 'get' ? p : {}
        })

        this.total = total
        let l = rows || data?.rows || data
        if (typeof requestListFormat === 'function') {
          l = await this.requestListFormat(l)
        }
        this.tableData = l

        this.$emit('requestSuccess', (this.tableData), type)
      } catch (error) {
        this.$message({
          message: '请求错误',
          type: 'warning'
        })
      } finally {
        this.loading = false
      }
    },
    /**
     * 切换页码的请求
     * @param { Number } val 页面值
     */
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.requestData()
    },
    // 表单 点击 搜索
    submitForm() {
      const { params } = this
      this.params = Object.assign({}, params, this.$props.modelValue)
      this.requestData()
    },
    // 重置表单
    resetForm() {
      this.$refs.searchForm.resetFields()
      this.params = {
        pageNum: 1,
        pageSize: 10
      }
      this.requestData()
    },
    // 头部按钮点击
    headerBtnClick() {
      this.$emit('handleHeaderBtn')
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss">
  .search {
    display: flex;
    flex-wrap: wrap;
    padding: 40px 10px 0px 10px;
  }

  .demo-form-inline {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
  }

  .btns {
    display: flex;
    grid-column: 10px;
    padding: 30px 0 10px 30px;
  }
</style>
